<template>
  <div>
    <el-dialog
      :visible.sync="dialogVisible"
      :close-on-click-modal="false"
      title="标记会员"
      width="700px"
      @close="close"
    >
      <div v-loading="dialogLoading">
        <el-form
          ref="form"
          :model="form"
          :rules="rules"
          label-width="120px"
          size="small"
        >
          <el-form-item label="方式" prop="remove">
            <el-radio-group v-model="form.remove">
              <el-radio label="add">添加标签</el-radio>
              <el-radio label="remove">移除标签</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item :label="form.remove === 'add' ? '添加标签到' : '从会员移除标签'" prop="memberPhones">
            <el-input
              v-model="form.memberPhones"
              :autosize="{ minRows: 10,maxRows: 20}"
              type="textarea"
              placeholder="请输入会员手机号"
              @focus="$refs.form.clearValidate(['memberPhones'])"
            />
            <div class="tip">一行一个(Enter换行), 最多可添加100个</div>
          </el-form-item>
          <el-form-item label="说明" prop="remark">
            <el-input
              v-model.trim="form.remark"
              :rows="4"
              type="textarea"
              placeholder="请输入..."
            />
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button size="medium" round @click="hide">取 消</el-button>
        <el-button size="medium" round type="primary" @click="Submit">提 交</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
// 正则匹配
import { validateMobilePhone } from '@/utils/validate.js'
import { addNewTag, tagMember } from '../../../../api/vip'
export default {
  data() {
    /**
     * 表单校验方法相关
     */
    // 手机号
    const validateTelPhone = (rule, value, callback) => {
      if (!value) {
        callback('请输入手机号')
      } else {
        const phoneArr = value
          .trim()
          .replace(/\ */g, '')
          .replace(/\n/g, ',')
          .replace(/,+/g, ',')
          .split(',')
        if (phoneArr.length > 100) callback('手机号单次最多50个')
        const result = phoneArr.some((v, i) => {
          if (!validateMobilePhone(v)) {
            callback(`手机号格式有误（第${i + 1}个手机号：（${v}））`)
            return true
          }
        })
        if (!result) callback()
      }
    }
    return {
      /**
       * 表单校验字段相关
       */
      // 表单规则
      rules: {
        memberPhones: [
          {
            required: true,
            validator: validateTelPhone,
            trigger: ['blur', 'change']
          }
        ]
      },
      // 配置
      // 状态
      dialogVisible: false,
      dialogLoading: false,
      tagId: null, // 标签id
      // 数据
      form: {
        remove: 'add'
      }
    }
  },
  computed: {},
  watch: {},
  created() {
  },
  mounted() {
  },
  methods: {
    /**
     * 数据组
     */
    /**
     * 按钮组
     */
    // 提交表单
    Submit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.dialogLoading = true
          const params = Object.assign({}, this.form)
          // 对手机号进行处理
          const phoneArr = params.memberPhones.trim().replace(/\n/g, ',').split(',')
          params.memberPhones = phoneArr
          params.remove = params.remove === 'remove'
          params.tagId = this.tagId
          // 删除多余字段
          for (const key in params) {
            if (params[key] === '') {
              delete params[key]
            }
          }
          tagMember(params).then(() => {
            this.$notify({
              title: '成功',
              message: '标记成功',
              type: 'success',
              duration: 2000,
              offset: 40
            })
            this.resolve()
            this.hide()
          }).finally(() => {
            this.dialogLoading = false
          })
        }
      })
    },
    /**
     * 状态组
     */
    open(tagId) {
      this.tagId = tagId
      this.show()
      return new Promise((resolve, reject) => {
        this.resolve = resolve
        this.reject = reject
      })
    },

    show() {
      this.dialogVisible = true
    },

    hide() {
      this.resolve = null
      this.reject = null
      this.dialogVisible = false
    },

    close() {
      this.dialogLoading = false
      this.$refs.form.resetFields()
    }
    /**
     * 方法组
     */
  }
}
</script>

<style scoped>

</style>
